<script setup lang="ts">
import dayjs from 'dayjs'
import useStar from '../../composition/useStar'
const onClickLeft = () => history.back()

const { getStarList, starList, cancelStar } = useStar()
await getStarList()
</script>

<template>
   <div>
      <van-nav-bar :title="$route.meta.title" left-text="返回" left-arrow @click-left="onClickLeft" />
      <div
         v-for="item in starList"
         :key="item.id"
         @click="$router.push({ name: 'detail', params: { id: item.articelId } })">
         <div class="list mb-4">
            <van-swipe-cell>
               <van-card
                  :desc="item.artiel.content"
                  :title="item.artiel.title"
                  :num="dayjs(item.createDate).fromNow()"
                  class="goods-card"
                  :thumb="item.artiel.previewImg" />
               <template #right>
                  <van-button square text="取消收藏" @click="cancelStar(item.id)" type="danger" class="delete-button" />
               </template>
            </van-swipe-cell>
         </div>
      </div>
   </div>
</template>

<style lang="scss" scoped>
.goods-card {
   margin: 0;
   background-color: white;
}

.delete-button {
   height: 100%;
}
</style>
